<script lang="ts" setup>
import { ref ,onMounted } from "vue" 
import * as echarts from "echarts"
import { echarts1 , echarts2 } from "@/layouts/admin/echarts"
import { nextTick } from "vue";

interface ICard {
  title: string;
  price: string;
  iconColor: string;
  icon:string
  total:string
  totalTitle:string
}
const cards = ref<ICard[]>([
  {
    title: "用户数",
    price: "2902",
    iconColor: "text-pink-500",
    icon: "icon-arrowRight-copy",
    total: "10000",
    totalTitle: "总人数",

  },
  {
    title: "评论数",
    price: "1222",
    iconColor: "text-red-500",
    icon: "icon-arrowRight-copy",
    total: "8721",
    totalTitle: "总评论数",

  },
  {
    title: "销售额",
    price: "￥2902",
    iconColor: "text-green-500",
    icon: "icon-arrowRight-copy",
    total: "￥32512",
    totalTitle: "总订单数",

  },
  {
    title: "订单数",
    price: "3326",
    iconColor: "text-blue-500",
    icon: "icon-arrowRight-copy",
    total: "23000",
    totalTitle: "总订单数",

  },
])

const initEcharts = () => {


 // 绘制图表
 echarts.init(document.getElementById("echarts1") as HTMLElement).setOption(echarts1);

 echarts.init(document.getElementById("echarts2") as HTMLElement).setOption(echarts2);
 // 绘制图表
}

nextTick(()=>{
  initEcharts()

})

onMounted(() => {
})

</script>

<template>
  <!-- 面板数据 -->
  <div class="grid md:grid-cols-4 gap-3">
    <el-card shadow="hover" :body-style="{ padding: '20px' }" v-for="(item,index) in cards" :key="index" class="cursor-pointer">
  <template #header>
  <div>
    <div class="flex justify-between items-center">
      {{ item.title }}
      <el-tag type="danger" size="small"  effect="dark" >月</el-tag>
      
    </div>
  </div>
  </template>
  <!-- card body -->
    <div class="flex justify-between items-center">
      <span class="text-2xl  text-gray-600">{{ item.price }}</span>
      <i :class="[item.iconColor,item.icon]" class="iconfont "></i>
    </div>
    <div class="text-sm flex mt-6 justify-between text-gray-600">
      <span>{{ item.totalTitle }}</span>
      <span>{{ item.total }}</span>
    </div>
 </el-card>
  </div>


  <!-- echarts  -->
   <div class=" mt-3  grid md:grid-cols-2 gap-3">
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <template #header>
      <div>
        用户统计
      </div>
      </template>
      <!-- card body -->
   <div id="echarts1"  class="w-full h-72"></div>

    </el-card>

    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <template #header>
      <div>
        用户统计
      </div>
      </template>
      <!-- card body -->
      <div id="echarts2"  class="w-full h-72"></div>

    </el-card>
    
 

   </div>
 
</template>



<style lang="scss" scoped>
 

</style>